<template>
	<div class="sw_website_adverts">
		<div class="aside">
			<el-radio-group v-model="activeName">
				<el-radio v-for="(item, index) in advertsData.childList" :key="index" :label="item.id">
					<h4>{{ item.name }}</h4>
					<el-dropdown size="medium" @command="handleDropdown($event, item)">
						<i class="el-icon-more"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="update">编辑</el-dropdown-item>
							<el-dropdown-item command="delete">删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-radio>
			</el-radio-group>
			<el-button type="primary" size="medium" @click="handleAdvertsSpace()">新增广告位</el-button>
		</div>
		<sw-common-frame class="adverts" :count="dataCount" :loading="loading">
			<template slot="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			</template>
			<el-form slot="query" size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.name" clearable placeholder="角色名称" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table slot="table" size="medium" :data="tableData" stripe height="100%">
				<el-table-column label="排序" width="50" align="center" prop="orderBy"></el-table-column>
				<el-table-column label="缩略图" width="260" :formatter="bannerImgFormatter"></el-table-column>
				<el-table-column label="名称" prop="name" min-width="320"></el-table-column>
				<el-table-column label="状态" min-width="100" align="center">
					<template slot-scope="{ row }">
						<el-tag size="medium" type="success" v-if="row.status === '1'">显示</el-tag>
						<el-tag size="medium" type="warning" v-if="row.status === '2'">隐藏</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="132">
					<el-button-group slot-scope="{ row }">
						<el-button size="mini" type="warning" @click="handleOpenDialog(row.id)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDeleteData(row)">删除</el-button>
					</el-button-group>
				</el-table-column>
			</el-table>
			<template slot="page">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
			</template>
		</sw-common-frame>
		<form-dialog v-model="formDialog" :data-id="dataId" :column-id="activeName" @refresh="queryTableData()"></form-dialog>
	</div>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { getPicSourceData, deletePicSource } from '@/api/website/sysPicSource';
import { getColumnData, deleteColumn, addedColumn, updateColumn } from '@/api/website/sysWebColumn';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '广告图',
			classType: '100',
			advertsData: {},
			activeName: ''
		};
	},
	computed: {
		listFunction() {
			return eval(getPicSourceData);
		},
		deleteFunction() {
			return eval(deletePicSource);
		}
	},
	watch: {
		activeName(val) {
			if (!val) return false;
			this.queryData['columnId'] = val;
			this.handleQueryTableData();
		}
	},
	mounted() {
		this.queryColumnData();
	},
	methods: {
		async queryColumnData() {
			let params = { pid: '0', classType: this.classType };
			let result = await getColumnData(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				if (lodash.isEmpty(datas)) {
					this.addedAdvertsRequest(params);
				} else {
					this.activeName = datas.childList[0]?.id;
					this.advertsData = { ...datas };
				}
			}
		},

		//新增广告请求
		async addedAdvertsRequest(data) {
			let obj = { isShow: '2', orderBy: '1000', classLevel: '1' };
			let params = { ...data, ...obj, name: '广告', isOutsite: '2' };
			let result = await addedColumn(params).then((res) => res.data);
			if (result.code === '0') {
				this.queryColumnData();
			}
		},

		//新增/修改广告位
		handleAdvertsSpace(data) {
			this.$prompt('请输入广告位名称', `${lodash.isEmpty(data) ? '新增' : '修改'}广告位`, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputValue: data?.name,
				inputValidator: (value) => {
					if (!value) return '请输入广告位名称';
				},
				beforeClose: async (action, instance, done) => {
					let inputValue = instance.inputValue;
					if (action === 'confirm') {
						await this.advertsSpaceRequest(inputValue, data);
					}
					done();
				}
			}).catch(() => {});
		},

		//下拉菜单事件
		handleDropdown(command, data) {
			if (command === 'update') {
				this.handleAdvertsSpace(data);
			} else if (command === 'delete') {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					beforeClose: async (action, instance, done) => {
						if (action !== 'confirm') done();
						await this.deleteColumnRequest(data.id);
						done();
					}
				}).catch(() => {});
			}
		},

		//格式化广告位参数
		formatAdvertsSpaceParams(name, data) {
			if (!data) {
				let pid = this.advertsData.id;
				let obj = { classType: this.classType };
				return { ...obj, pid, name, orderBy: '10' };
			} else {
				return { ...data, name };
			}
		},

		//新增/修改广告位请求
		async advertsSpaceRequest(name, data) {
			let params = this.formatAdvertsSpaceParams(name, data);
			let callFunction = !data ? addedColumn : updateColumn;
			let result = await callFunction(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success(`${lodash.isEmpty(data) ? '新增' : '修改'}广告位成功`);
				this.queryColumnData();
			} else {
				this.$message.error(result.msg || `${lodash.isEmpty(data) ? '新增' : '修改'}失败`);
			}
		},

		//删除广告源
		async deleteColumnRequest(id) {
			let result = await deleteColumn(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除广告位成功');
				this.queryColumnData();
			} else {
				this.$message.error(result.msg || '删除失败');
			}
		},

		// 格式化缩略图
		bannerImgFormatter(row) {
			let src = row.httpUrl?.replaceIP() || '';
			let style = { width: '240px', height: '75px', display: 'block' };
			return this.$createElement('elImage', { attrs: { src, previewSrcList: [src] }, style });
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_website_adverts {
	display: flex;
	height: 100%;
	.aside {
		display: flex;
		flex-direction: column;
		border-right: solid 1px #ebeef5;
		min-width: 240px;
		width: 20%;
		.el-button {
			margin: 16px;
		}
	}
	.adverts {
		flex: 1;
	}
	.el-radio-group {
		flex: 1;
		width: 100%;
		overflow: auto;
		border-bottom: solid 1px #ebeef5;
	}
	.el-radio {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 16px 6px 16px 16px;
		width: 100%;
		margin: 0;
		&.is-checked {
			background-color: var(--primary-border-plain-disabled);
		}
	}
	&:deep(.el-radio__input) {
		display: none;
	}
	&:deep(.el-radio__label) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 0;
		font-size: 16px;
		flex: 1;
		h4 {
			font-weight: normal;
		}
	}
	.el-dropdown-selfdefine {
		margin-right: 10px;
	}
}
</style>
